<template>
  <div class="major-project-page">
    <h2 class="content-title">重大项目交通保障</h2>
    <div class="solution-intro">
      <div class="solution-image">
        <img src="http://www.sutpc.com/resource/sutpc/images/solution-major.jpg" alt="重大项目交通保障解决方案">
      </div>
      <div class="solution-desc">
        <p>中空领航重大项目交通保障解决方案，为政府部门提供全方位的重大活动交通组织与管理服务，通过智能化手段确保国家级重要会议、大型体育赛事、文化活动等重大项目的交通安全与顺畅。</p>
        <p>我们的解决方案基于城市交通数字孪生平台，融合多源交通大数据，运用人工智能、大数据分析等前沿技术，实现重大活动交通的精细化、智能化管理，最大程度减少对市民日常出行的影响，同时保障重要活动的顺利进行。</p>
      </div>
    </div>

    <div class="solution-features">
      <h3 class="section-title">解决方案特点</h3>
      <div class="features-container">
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-predict.svg" alt="预测分析">
          </div>
          <div class="feature-content">
            <h4>活动交通影响评估</h4>
            <p>基于历史数据与交通模型，科学评估重大活动对周边交通的影响范围与程度，为交通组织方案制定提供依据。</p>
          </div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-optimize.svg" alt="方案优化">
          </div>
          <div class="feature-content">
            <h4>多情景方案模拟</h4>
            <p>通过交通仿真技术，模拟多种交通组织方案效果，对比分析各方案优劣，辅助决策最优方案。</p>
          </div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-monitor.svg" alt="实时监测">
          </div>
          <div class="feature-content">
            <h4>全域交通态势监测</h4>
            <p>实时监测活动区域及影响范围内的交通运行状态，及时发现异常拥堵，为指挥调度提供数据支撑。</p>
          </div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-dispatch.svg" alt="智能调度">
          </div>
          <div class="feature-content">
            <h4>应急事件快速响应</h4>
            <p>建立交通突发事件应急预案库，结合AI辅助决策，实现交通事件的快速发现、研判与处置。</p>
          </div>
        </div>
      </div>
    </div>

    <div class="solution-cases">
      <h3 class="section-title">典型案例</h3>
      <div class="cases-container">
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-expo.jpg" alt="世界博览会交通保障">
          </div>
          <div class="case-content">
            <h4>2022世界园艺博览会交通保障</h4>
            <p>为期6个月的世界园艺博览会期间，我司提供全方位的交通保障服务，通过交通大数据平台实时监测园区及周边交通状况，优化调度200余条接驳公交线路，实现观众平均等待时间降低40%，满意度达95%以上。</p>
            <a href="javascript:;" class="read-more">查看详情</a>
          </div>
        </div>
        
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-summit.jpg" alt="国际峰会交通保障">
          </div>
          <div class="case-content">
            <h4>2023国际数字经济峰会交通保障</h4>
            <p>为期3天的国际数字经济峰会期间，我司构建了全市交通运行监测平台，实现对主要道路、重点区域交通状况的实时监测，通过AI信号优化技术，确保VIP车队通行时间较常规缩短30%，获得主办方高度认可。</p>
            <a href="javascript:;" class="read-more">查看详情</a>
          </div>
        </div>
        
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-sport.jpg" alt="体育赛事交通保障">
          </div>
          <div class="case-content">
            <h4>2022全国运动会交通保障</h4>
            <p>在为期14天的全国运动会期间，我司为15个比赛场馆提供交通保障服务，通过观众出行需求预测模型，合理配置公共交通资源，优化赛事周边区域交通组织，实现观众安全、有序、高效出行，赢得组委会嘉奖。</p>
            <a href="javascript:;" class="read-more">查看详情</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="solution-recommend">
      <h3 class="section-title">推荐产品</h3>
      <div class="products-container">
        <div class="product-item">
          <div class="product-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/product-event.jpg" alt="重大活动交通保障平台">
          </div>
          <div class="product-content">
            <h4>重大活动交通保障平台</h4>
            <p>专为政府部门打造的重大活动交通保障一体化解决方案，覆盖活动前期规划、中期实施与后期评估全过程。</p>
          </div>
        </div>
        
        <div class="product-item">
          <div class="product-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/product-simulation.jpg" alt="交通仿真分析系统">
          </div>
          <div class="product-content">
            <h4>交通仿真分析系统</h4>
            <p>基于数字孪生技术的交通仿真分析系统，可模拟评估各种交通组织方案的效果，辅助决策最优方案。</p>
          </div>
        </div>
        
        <div class="product-item">
          <div class="product-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/product-command.jpg" alt="交通指挥调度系统">
          </div>
          <div class="product-content">
            <h4>交通指挥调度系统</h4>
            <p>面向交警、交通等管理部门的指挥调度系统，实现交通事件快速发现、研判与处置，提升应急处置能力。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MajorProjectPage'
}
</script>

<style scoped>
.major-project-page {
  max-width: 100%;
}

.content-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.solution-intro {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
}

.solution-image {
  flex: 0 0 50%;
}

.solution-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.solution-desc {
  flex: 0 0 50%;
}

.solution-desc p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  color: var(--text-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.section-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--secondary-color);
}

.features-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.feature-item {
  display: flex;
  gap: 20px;
}

.feature-icon {
  flex: 0 0 60px;
}

.feature-icon img {
  width: 60px;
  height: 60px;
}

.feature-content {
  flex: 1;
}

.feature-content h4 {
  font-size: 18px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.feature-content p {
  color: #666;
  line-height: 1.6;
}

.cases-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}

.case-item {
  display: flex;
  gap: 30px;
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

.case-image {
  flex: 0 0 40%;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-content {
  flex: 1;
  padding: 30px 30px 30px 0;
  position: relative;
}

.case-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.case-content p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.read-more {
  color: var(--primary-color);
  font-weight: bold;
  position: absolute;
  bottom: 30px;
  right: 30px;
  transition: color 0.3s;
}

.read-more:hover {
  color: var(--secondary-color);
}

.products-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.product-item {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.product-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-content {
  padding: 20px;
}

.product-content h4 {
  font-size: 18px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.product-content p {
  color: #666;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .solution-intro {
    flex-direction: column;
  }
  
  .features-container {
    grid-template-columns: 1fr;
  }
  
  .case-item {
    flex-direction: column;
  }
  
  .products-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-container {
    grid-template-columns: 1fr;
  }
}
</style> 